 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1, viewport-fit=cover">
<link
  rel="stylesheet"
  href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"
/>
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
<style>
  .flex { display: flex;}
  text { display: inline-block; min-width: 40px;}
  .num{
		width: 50px;
		text-align: right;
        margin-right: 10px;
	}
	.warp{
		height: calc(100vh - 250px);
		overflow: auto;
	}
	.right{ text-align: center; }
	textarea{ height: 200px; }
	::-webkit-scrollbar{ display: none;}
	.warp img{
		max-width: 420px;
	}
	@media (max-width: 600px) {
		.warp img{
		max-width: calc(100vw - 100px);
	}
}
</style>
<div id="app"></div>
<script>
  const app = Vue.createApp({
    template: `<div>
	  <div class="flex">
		<van-field style="height:200PX" v-model="codes"   type="textarea" :border="true" /> 
		<van-field style="width:600px;height:200PX" v-model="info"   type="textarea" :border="true" /> 
	  </div>
	  <div class="flex">
		  <div class="left" style="flex:1" >
		     <van-button @click="flush()" style="width:100%"> 刷新 </van-button>
			 <div class="warp">
				<img  v-for="(e,i) in imgs" :key='i'  :src='e' @click="view(e,i)"/>
	  		 </div>
	       </div>	
		   <div class="right">
				<van-icon name="replay" color="#FF7E1F" size="28" @click="init()"/><br/>
				<van-stepper v-model="diff" min="0.01" step="0.01"/><br/>
				<van-stepper v-model="number" min="100" step="100"/><br/>

				{{ (diff * number).toFixed(2) }} 

				<div v-for="(e,i) in 10" :key="i" style="display: flex;flex-direction: row;">
					<text class="num">{{ (i+1) * 100 }}</text> <text class="num"> {{ ((i+1) * 100 * diff).toFixed(2) }} </text>
				</div>

				<van-stepper v-model="m1" min="0.01" step="0.01"/>
				<van-stepper v-model="n1" min="100" step="100"/><br/>

				<van-stepper v-model="m2" min="0.01" step="0.01"/>
				<van-stepper v-model="n2" min="100" step="100"/><br/>

				{{ ((m1 * n1 + m2 * n2 )/( n1 + n2)).toFixed(2) }} 
	       </div>	 
	   </div>	 
    </div>`,
    data() {
      return {
		codes:`
sz000610,sz002610,sh600977,sz000807,sh600556,sh600556,sz300058,sz002354
		`,
		info:`
每日关注:
sz000610 12~17
sz002610 2.2~3
		`,
		imgs:[ ],
		// 盈利计算
        diff: 0.1,
        number: 500,
        // 均摊计算
		m1:10,
		n1:500,
		m2:10,
		n2:500,
      };
    },

    computed: {
      value() {
        return this.diff * this.number;
      },
    },
    created(){
	  var c = localStorage.getItem("codes")
	  
	  var i = localStorage.getItem("info")
	  if(c){
		this.codes = c
	    this.info = i
	 }
     this.flush()
	},
    methods: {
      init() {
        this.diff = 0.01;
        this.number = 500;
		this.m1  = 10
		this.n1  = 500
		this.m2  = 10
		this.n2  =500
      },
      flush() {
		var host ='http://image.sinajs.cn/newchart'
		var tmp = []
		this.codes.trim().split(',').map(code=>{
			if(!code) return;
			tmp.push(`${host}/daily/n/${code}.gif`)
			//tmp.push(`${host}/weekly/n/${code}.gif`)
		    tmp.push(`${host}/min/n/${code}.gif`)
		})
		this.imgs = tmp
		localStorage.setItem("codes",this.codes)
		localStorage.setItem("info",this.info)
      },
	  view(e,i){
		vant.showImagePreview({ images:this.imgs,startPosition: i ,closeable: true,});
	  }
    },
  });
  app.use(vant);

  app.mount("#app");
</script>
